import React, { Component } from 'react'
import { Menu, Icon, Layout } from 'antd'
import { Link } from 'react-router-dom'
import { menusConfig as menus } from '../constants/menus'
import { withRouter } from 'react-router-dom'

const SubMenu = Menu.SubMenu
const Item = Menu.Item
const { Sider } = Layout

class SiderMenus extends Component {
	renderMenu = menusConfig => menusConfig.map(menu => {
		if(!!menu.sub) {
			return (
				<SubMenu
					key={menu.key}
					title={
						<span>
							<Icon type={menu.icon} />
							<span>{menu.title}</span>
						</span>}
				>
					{this.renderMenu(menu.sub)}
				</SubMenu>
			)
		} else {
			return (
				<Item key={menu.key}>
					<Link to={menu.key}>
						<span>{menu.title}</span>
					</Link>
				</Item>
			)
		}
	})

	render() {
		return (
			<Sider
				collapsed={this.props.collapsed}
			>
				<Menu theme="dark" mode="inline">
					{this.renderMenu(menus)}
				</Menu>
			</Sider>
		)
	}
}

export default withRouter(SiderMenus)
